import React from "react";
import { m } from "framer-motion";
import { varFade } from "@/components/animate/variants/fade";
import MotionContainer from "@/components/animate/motion-container";
import service from "@/assets/images/common/custom-service.jpg";
import about from "@/assets/images/common/about.jpg"
import { useInView, animated } from '@react-spring/web'
import Bmap from "@/components/Bmap";
import weixingz from "@/assets/images/common/weixin_icon.png"
import weixin from "@/assets/images/common/read_book_icon.png"
import douyin from "@/assets/images/common/douyin_icon.png"
const Custom = () => {

  const [ref, inView] = useInView({ once: true })
  return (
    <MotionContainer>
      <m.div className='relative z-10'>
        <img src={about} className='h-468px'></img>
        <div ref={ref} className={`${inView ? 'animate__animated animate__fadeInUp' : ''} w-full text-center absolute z-20 top-1/2 text-2xl text-white`}>
          联系我们 /  CONTACT US
        </div>
      </m.div>

      <div className="flex  w-1200px mx-auto mt-10">
        <img src={service}></img>
        <div className="ml-10">
          <div className="text-3xl mt-5 text-gray-500">西安柠聚会务有限责任公司</div>
          <div className="text-2xl mt-5 text-gray-500">柠聚·只做超预期体验</div>
          <div className="text-xl mt-5">联系电话：17391900505（微信同号）</div>
          {/* <div className="text-xl mt-5">企业邮箱：2487580044@qq.com</div> */}
          <div className="text-xl mt-5">公司地址：陕西省西安市碑林区友谊东路81号泰华世纪新城B座603号</div>
          <div className="flex">
            <div className="mt-5 mr-10 flex w-36 flex-col text-center">
              <img className="h-36 w-36" src={weixingz}></img>
              <div className="w-full mt-2">扫一扫加关注</div>
            </div>
            <div className="mt-5 mr-10 flex w-36 flex-col text-center">
              <img className="h-36 w-36" src={weixin}></img>
              <div className="w-full mt-2">扫一扫加小红书</div>
            </div>
            <div className="mt-5 flex w-36 flex-col text-center">
              <img className="h-36 w-36" src={douyin}></img>
              <div className="w-full mt-2">扫一扫加抖音</div>
            </div>
          </div>
        </div>
      </div>
      <Bmap></Bmap>
    </MotionContainer>
  );
};

export default Custom;
